<template>
    <el-dialog v-model="visible" title="导出数据" width="750" draggable overflow append-to-body>
        <el-tabs v-model="activeTabName" type="border-card" class="tabs-small tabs-head" @tab-change="onTabChange">
            <el-tab-pane label="选号池" name="xhc"></el-tab-pane>
            <el-tab-pane label="高级筛选" name="gjsx"></el-tab-pane>
        </el-tabs>
        <div class="my-2">
            <el-input v-model="content" type="textarea" size="small" :rows="10" placeholder="输入 JSON 格式数据。"></el-input>
        </div>
        <template #footer>
            <el-button-group size="small">
                <el-button type="primary" @click="onCopy()">复制</el-button>
                <el-button type="danger" @click="onClear()">清空</el-button>
                <el-button type="info" @click="visible = false">关闭</el-button>
            </el-button-group>
        </template>
    </el-dialog>
</template>

<script setup>
import { copyText } from '@/utils/Utils';
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref, watch } from 'vue';

const activeTabName = ref('xhc');
const content = ref('');
const visible = defineModel();

const props = defineProps({
    xhc: { type: Array },
    gjsx: { type: Object }
});

const emit = defineEmits(['submit']);

watch(() => [props.xhc, props.gjsx], () => {
    onTabChange();
})
const onTabChange = () => {
    switch (activeTabName.value) {
        case 'xhc':
            if (props.xhc.length > 0) {
                content.value = props.xhc.map((v, i) => `"0${i + 1}": "${v}"`).join(',\n');
            }
            break;
        case 'gjsx':
            if (typeof props.gjsx === 'object') {
                content.value = JSON.stringify(props.gjsx, null, 4);
            }
            break;
    }
}

const onClear = () => {
    ElMessageBox.confirm('确定要清空数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(() => {
        content.value = '';
    })
}

const onCopy = () => {
    copyText(content.value);
    ElMessage.success('复制成功');
}
</script>